<template>
  <div class="overview">
    <div class="avatat-section">
      <p>头像</p>
      <img :src="userStore.userInfo.logo" alt="用户头像" @click="selectImage" />
    </div>
    <input
      style="visibility: hidden"
      ref="avatarInput"
      type="file"
      @change="uploadImage"
    />
    <div class="binding-section">
      <div class="binding-title">
        <h4>账号绑定</h4>
        <p>
          绑定手机号和微信，账号更安全且登录方便;
          为保证账号安全，绑定账号需进行二次验证。
        </p>
      </div>
      <div class="binding-options">
        <div class="binding-option">
          <div class="binding-text">
            <img src="@img/recharge/Bind-WeChat.png" alt="绑定微信" />
            <p>
              绑定微信：<span>{{
                userStore.userInfo.isWechat == 0 ? "未绑定" : "已绑定"
              }}</span>
            </p>
          </div>
          <p
            class="binding-operate"
            @click="openDialog(wxDialog)"
            v-if="userStore.userInfo.isWechat == 0"
          >
            绑定
          </p>
        </div>
        <div class="horizontal"></div>
        <div class="binding-option">
          <div class="binding-text">
            <img src="@img/recharge/Bind-phone.png" alt="绑定手机" />
            <p>绑定手机：<span>未绑定</span></p>
          </div>
          <p class="binding-operate">绑定</p>
        </div>
      </div>
    </div>
    <div class="password-section">
      <div class="binding-title">
        <h4>密码设置</h4>
        <p>设置密码，账号更安全;为保证账号安全，设置密码需进行二次验证</p>
      </div>
      <div class="binding-options">
        <div class="binding-option">
          <div class="binding-text">
            <img src="@img/recharge/Bind-WeChat.png" alt="修改密码" />
            <p>密码<span>***********</span></p>
          </div>
          <p class="binding-operate" @click="openDialog(passwordDialog)">
            修改
          </p>
        </div>
        <div class="horizontal"></div>
        <div class="binding-option">
          <div class="binding-text">
            <img src="@img/recharge/Cancel-account.png" alt="绑定手机" />
            <p>
              注销账号<span style="color: #c90000"
                >您的账号一旦被注销成功将不可恢复~</span
              >
            </p>
          </div>
          <p class="binding-operate" @click="openDialog(loginOutDialog)">
            注销
          </p>
        </div>
      </div>
    </div>
  </div>

  <component :is="comp" @closeDialog="closeDialog" @passVerify="passVerify" />
</template>

<script setup lang="ts">
import { ref, markRaw } from "vue";
// store
import { useGlobalStore } from "@stores";
const userStore = useGlobalStore().userStore;
// api
import { loginReginfo } from "@api/user";

import loginOutDialog from "./comp/loginOutDialog.vue";
import passwordDialog from "./comp/passwordDialog.vue";
import wxDialog from "./comp/wxDialog.vue";
import VerifyDialog from "./comp/index.vue";

const loginOutDialogRaw = markRaw(loginOutDialog);
const passwordDialogRaw = markRaw(passwordDialog);
const wxDialogRaw = markRaw(wxDialog);

let comp = ref(null);
let saveComp = ref(null);

// 控制上传头像input框
let avatarInput = ref(null);
// 点击头像触发input 的click事件
const selectImage = () => {
  avatarInput.value && avatarInput.value.click();
};
// 上传头像
const uploadImage = async (e: Event) => {
  // console.log(e.target?.files[0]);
  // console.log(avatarInput.value.files[0]);
  const formData = new FormData();
  formData.append("file", avatarInput.value.files[0]);
  // 请求
  const res = await loginReginfo(formData);
  if (res.code == 0) {
    ElNotification({
      showClose: true,
      message: res.errorMessage,
      type: "success",
    });
    userStore.getUserInfo();
  }
};

// 打开弹窗
const openDialog = (component) => {
  comp.value = VerifyDialog;
  saveComp.value = component;
};
// 关闭弹窗
const closeDialog = () => {
  comp.value = null;
};

// 通过验证
const passVerify = () => {
  comp.value = null;
  comp.value = saveComp.value;
};
</script>

<style lang="scss" scoped>
.overview {
  .avatat-section {
    display: flex;
    align-items: center;
    p {
      font-size: 13px;
      color: #232323;
      font-weight: 700;
    }
    img {
      width: 70px;
      height: 70px;
      border-radius: 9px 9px 9px 9px;
      margin-left: 33px;
      cursor: pointer;
    }
  }
  .binding-section,
  .password-section {
    margin-top: 33px;
    .binding-title {
      display: flex;
      align-items: center;
      h4 {
        font-size: 13px;
        color: #232323;
        margin: 0;
      }
      p {
        margin: 0;
        color: #989898;
        font-size: 11px;
        margin-left: 7px;
      }
    }
    .binding-options {
      margin-top: 16px;
      height: 144px;
      border-radius: 7px 7px 7px 7px;
      border: 1px solid #dbdbdb;
      display: flex;
      flex-direction: column;
      padding-left: 19px;
      padding-right: 25px;

      .binding-option {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .binding-text {
          display: flex;
          align-items: center;

          img {
            width: 15px;
            height: 13px;
          }
          p {
            margin: 0;
            font-size: 12px;

            margin-left: 4px;

            span {
              color: #989898;
              margin-left: 4px;
            }
          }
        }
        .binding-operate {
          margin: 0;
          font-size: 12px;
          color: #c90000;
          cursor: pointer;
        }
      }
      .horizontal {
        border-bottom: 1px solid #dbdbdb;
      }
    }
  }
}
</style>
